<template>
  <a-card title="桌面配置">
    <a-space class="w-100" direction="vertical">
      <div class="flex justify-between align-center">
        <div>明亮度</div>
        <div class="flex align-center">
          <a-slider
            v-model:value="store.$state.theme.background.brightness"
            :min="0"
            :max="80"
            :step="5"
            style="width: 200px"
          ></a-slider>
          <div class="label">{{ store.$state.theme.background.brightness }}%</div>
        </div>
      </div>

      <div class="flex justify-between align-center">
        <div>模糊</div>
        <div class="flex align-center">
          <a-slider
            v-model:value="store.$state.theme.background.blur"
            style="width: 200px"
            :max="12"
          ></a-slider>
          <div class="label">{{ store.$state.theme.background.blur }}px</div>
        </div>
      </div>

      <div class="flex justify-between align-center">
        <div>灰度</div>
        <div class="flex align-center">
          <a-slider
            v-model:value="store.$state.theme.background.grayscale"
            style="width: 200px"
            :max="100"
            :step="5"
          ></a-slider>
          <div class="label">{{ store.$state.theme.background.grayscale }}%</div>
        </div>
      </div>
    </a-space>
  </a-card>
</template>

<script setup lang="ts">
import usePageStore from '@/store/page';

const store = usePageStore();
</script>

<style lang="scss" scoped>
.blur-card {
  width: 100%;
}
.label {
  width: 36px;
  text-align: center;
  color: #999;
}
</style>
